<template>
	<view>
		<view class="bottomContainer flex">
			<view class="navItem flex align-center justify-center" v-for="(item, index) in bottomNav" :key="index"
				@tap="chooseGoods(item.bcid, item)">
				<view class="name">{{item.name}}</view>
				<u-line v-if="index !== bottomNav.length-1" direction="col" length="20px"></u-line>
			</view>
		</view>
		<u-popup :show="showCate" mode="left" @close="closeCate">
			<view class="cateList fs-28">
				<view class="cateItem" v-for="(item, index) in cateList" :key="item.bcid">
					<view class="cateItemInfo padding-bottom padding-left margin-bottom"
						:class="index!==cateList.length-1?'dashed-bottom' : ''">
						<view class="flex">
							<view>{{item.bname}}</view>
							<view class="catecount">{{item.num}}</view>
						</view>

						<view class="tasteCateList" v-if="item.list&&item.list.length">
							<view class="title flex margin-top-sm padding-bottom-sm" @tap="changeCurrentCate('口味筛选')">
								口味筛选
								<view class="iconfont icon-xiangshang margin-left-sm"
									:class="showCurrentCate?'active':''">
								</view>
							</view>
							<transition>
								<view class="tasteList" v-show="showCurrentCate">
									<view class="childCateItem padding-bottom-sm padding-top-sm"
										v-for="item1 in item.list" :key="item1.tid"
										@tap="chooseGoods(item1.bid, item1)">
										<text class="kw_03">{{item1.tname}}</text>
									</view>
								</view>
							</transition>

						</view>

						<view class="tasteCateList" v-if="item.scene&&item.scene.length">
							<view class="title flex margin-top-sm padding-bottom-sm" @tap="changeCurrentCate('场景筛选')">
								场景筛选
								<view class=" iconfont icon-xiangshang margin-left-sm"
									:class="currentcate&&!(showCurrentCate)?'active':''">
								</view>
							</view>
							<transition>
								<view class="screenList" v-show="currentcate&&!(showCurrentCate)">
									<view class="childCateItem padding-bottom-sm padding-top-sm"
										v-for="item1 in item.scene" :key="item1.tid"
										@tap="chooseGoods(item1.bid, item1)">
										<text>{{item1.tname}}</text>
									</view>
								</view>
							</transition>

						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { reqCateList } from '../utils/index.js'
	export default {
		name: "nav-bottom",
		data() {
			return {
				cateList: [],
				currentcate: '',
				showCate: false,
				bottomNav: [{
					name: '分类',
					bcid: '',
					target: ''
				}, {
					name: '蛋糕',
					bcid: 1,
					target: '',
					target: '/pages/cake/cake'
				}, {
					name: '面包',
					bcid: 11,
					target: '',
					target: '/pages/cake/cake'
				}, {
					name: '小食',
					bcid: 6,
					target: '/pages/cake/cake'
				}, {
					name: '购物车',
					bcid: '',
					target: '/subPackages/cart/cart'
				}]
			};
		},
		methods: {
			chooseGoods(bcid, obj) {
				if (bcid) {
					let condition = {
						bcid
					}
					if (obj) {
						obj.tgid == 1 ? condition.fid = obj.tid : condition.sid = obj.tid
						this.showCate = false
						this.currentcate = ''
					}
					this.$store.commit('changeReqcondition', condition)
					uni.navigateTo({
						url: "/subPackages/cake/cake"
					})
					// this.resetInfo()
					// this.getGoods()
				} else {
					if (obj.target) {
						uni.navigateTo({
							url: obj.target
						})
						return
					}
					this.openCate()
				}
			},
			async getCateList() {
				const res = await reqCateList()
				this.cateList = res.results.splice(0, 3)
				console.log('res', res)
			},
			closeCate() {
				this.showCate = false
			},
			openCate() {
				this.showCate = true
			},
			changeCurrentCate(val) {
				if (this.currentcate == val) {
					this.currentcate = ''
					return
				}
				this.currentcate = val
				console.log(this.currentcate)
			}
		},
		computed: {
			showCurrentCate() {
				if (!this.currentcate) return false
				return this.currentcate == '口味筛选'
			}
		},
		created() {
			this.getCateList()
		}
	}
</script>

<style lang="scss">
	.bottomContainer {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
		background-color: #fff;
		width: 100%;
		height: 80upx;
		box-shadow: 0 5upx 10upx 4upx rgba(0, 0, 0, .3);

		.navItem {
			flex: auto;

			.name {
				width: 100%;
				text-align: center;
			}
		}
		
	}
	.cateList {
		width: 350upx;
		height: 100vh;
		padding-top: 100upx;
		overflow: auto;
	
		.cateItemInfo {
			.catecount {
				background-color: #f4e36c;
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				line-height: 40upx;
				text-align: center;
				margin-left: 10upx;
			}
	
			.tasteCateList {
				overflow: auto;
	
				.tasteList {
					// overflow: auto;
					// height: 400upx;
					// transition: all 1s ease;
	
					// transform: translateY(-50%);
				}
			}
		}
	
	}
	.active {
		transform: rotate(180deg);
	}
	
	.v-enter-active,
	.v-leave-active {
		transition: all .5s ease;
	}
	
	.v-enter-to,
	.v-leave {
		max-height: 1000upx;
	}
	
	.v-enter,
	.v-leave-to {
		max-height: 0;
	}
	.iconfont {
		transition: all .5s ease;
	}
</style>
